<script setup lang="ts">
import { shuffle as _shuffle } from "lodash-es";
import { ref, onMounted } from "vue";
defineOptions({
  name: ""
});

//重新排序
function shuffle() {
  assetdata.value = _shuffle(assetdata.value);
}

onMounted(() => {
  setInterval(() => {
    shuffle();
  }, 5000);
}),
  console.log(_shuffle);

const assetdata = ref([
  {
    name: "A",
    ip: "1.22.33.44",
    port: "80,443",
    service: "http,https",
    time: "2024-12-28 11:33:46"
  },
  {
    name: "B",
    ip: "193.11.22.33",
    port: "80,443",
    service: "http,https",
    time: "2022-12-28 11:33:46"
  },
  {
    name: "C",
    ip: "132.22.44.5",
    port: "80,443",
    service: "http,https",
    time: "2233-12-28 11:33:46"
  },
  {
    name: "D",
    ip: "124.34.5.5",
    port: "80,443",
    service: "http,https",
    time: "1023-12-28 11:33:46"
  },
  {
    name: "E",
    ip: "1.33.33.45",
    port: "80,443",
    service: "http,https",
    time: "2263-12-28 11:33:46"
  }
]);
</script>

<template>
  <div class="asset-tb-box abs-br-box">
    <h3 class="data-header">最新20个资产</h3>
    <section class="section">
      <header class="flex-header flex-row">
        <div>IP地址</div>
        <div>端口</div>
        <div>服务</div>
        <div>发现方式</div>
        <div>最近活跃时间</div>
      </header>
      <section class="flex-section">
        <TransitionGroup tag="div" name="list" class="list-box">
          <div
            v-for="(asset, index) in assetdata"
            :key="asset.name"
            class="flex-row flex-row-item"
          >
            <div>
              <div>{{ asset.ip }}</div>
            </div>
            <div>
              <div>{{ asset.port }}</div>
            </div>
            <div>
              <div>{{ asset.service }}</div>
            </div>
            <div>
              <div>
                <div class="source-wrap">
                  <div class="img">
                    <span
                      ><div
                        role="tooltip"
                        id="el-popover-593"
                        aria-hidden="true"
                        class="el-popover el-popper"
                        tabindex="0"
                        style="width: 150px; display: none"
                      >
                        <!---->
                        <div style="font-size: 12px">主动扫描</div>
                      </div>
                      <img
                        src=""
                        alt=""
                        class="el-popover__reference"
                        aria-describedby="el-popover-593"
                        tabindex="0"
                    /></span>
                  </div>
                  <!---->
                </div>
              </div>
            </div>
            <div>
              <div>{{ asset.time }}</div>
            </div>
          </div>
        </TransitionGroup>
      </section>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.abs-br-box {
  padding: 10px;
  background-color: rgba(22, 176, 227, 0.1);
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 5px;
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    left: -5px;
    border: 1px solid #506e7b;
    border-right: none;
  }
  &::after {
    content: "";
    display: block;
    width: 5px;
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    right: -5px;
    border: 1px solid #506e7b;
    border-left: none;
  }
}

.data-header {
  font-size: 15px;
  line-height: 15px;
  font-weight: normal;
  color: #2fdbbb;
  padding: 0 10px 10px 0;
}

.asset-tb-box {
  height: 100%;
  width: calc(((100% - 500px) / 2) + 480px);
  margin: 10px 10px;
  .section {
    position: relative;
  }

  .flex-row {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    padding: 0 10px;
    -webkit-transition: all 1s;
    transition: all 1s;
  }

  .list-enter {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  .list-leave-to {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  .list-leave-active {
    position: absolute;
    max-width: 100%;
    min-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1s;
    transition: all 1s;
  }

  .flex-row > div {
    width: 25%;
  }

  .flex-row-item {
    border-bottom: 1px solid #000;
    height: 36px;
    & > div {
      font-family: AlibabaPuHuiTiR;
      font-size: 12px;
      color: #f4f4f4;
      letter-spacing: 0.75px;
      line-height: 36px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .flex-row-item:nth-child(2n) {
    background-color: #33393e;
  }

  .flex-header {
    border-bottom: 1px solid #000;
    text-align: left;
    background-color: #2b4a57;
    position: absolute;
    width: 100%;
    z-index: 10;
    height: 38px;
  }

  .flex-header > div {
    // font-family: AlibabaPuHuiTiR;
    font-size: 12px;
    color: #f4f4f4;
    letter-spacing: 0.75px;
    line-height: 14px;
    line-height: 38px;
  }

  .flex-section {
    position: absolute;
    width: 100%;
    top: 38px;
    left: 0;
    .list-box {
      height: 180px;
      width: 100%;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: relative;
    }
  }
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 1.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}

.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>
